<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>过滤器</title>
</head>

<body>
    <div id="main">
        ${{money}}
        {{money|addSymbols}} <!--过滤器的书写方式 | 添加的过滤器名-->
        {{money|addUsd}}
        {{money|addUsd2}}
    </div>
    <div id="main2">
        {{cash}}
        {{cash|addUsd}}
        {{cash|addUsd2}}
    </div>
    <div id="main3">
        {{cash|addUsd}} <!------>
    </div>
</body>
<script>
    //全局过滤器---也能实现
    Vue.filter('addSymbols', (value) => {
        return "¥ " + value;
    })

    Vue.filter('addUsd',function(value){
        return '$'+value;
    })

    //作用域：id为main的元素区间
    new Vue({
        el: "#main",
        data: {
            money: 10000
        },
        methods: {
            money: function () {
                return "$" + this.money
            }
        },
        //局部的过滤
        filters:{
            addUsd2:function(val){
                return '$'+val;
            }
        }
    });
    //全局的和局部的有啥区别？？

    new Vue({
         el:"#main2",
         data:{
             cash:10000,
         }
    });

    // new Vue({
    //      el:"#main3",
    //      data:{
    //          cash:10000,
    //      }
    // });
</script>

</html>